import React, { useState, useEffect } from 'react';
import { Card, List, Button, message, Modal, Tag, Rate, Row, Col } from 'antd';
import { DeleteOutlined, PlayCircleOutlined, StarOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import '../styles/Favorites.css';

const Favorites = () => {
  const [favorites, setFavorites] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 模拟从本地存储获取收藏数据
    const mockFavorites = [
      {
        id: '1',
        title: '流浪地球2',
        poster: 'https://n.sinaimg.cn/sinakd20230123s/706/w1906h2800/20230123/9137-b383634783de89cde4d98c83c618be19.jpg',
        rating: 8.5,
        duration: '173分钟',
        type: '科幻/冒险',
        releaseDate: '2024-01-22',
        description: '太阳即将毁灭，人类在地球表面建造出巨大的推进器，寻找新家园。然而宇宙之路危机四伏，为了拯救地球，流浪地球时代的年轻人再次挺身而出，展开争分夺秒的生死之战。',
        tags: ['科幻', '冒险', '灾难']
      },
      {
        id: '2',
        title: '满江红',
        poster: 'https://img2.jiemian.com/101/original/20230125/167457861579568000_a700xH.jpeg',
        rating: 7.8,
        duration: '159分钟',
        type: '悬疑/剧情',
        releaseDate: '2024-01-22',
        description: '南宋绍兴年间，岳飞死后四年，秦桧率兵与金国会谈。会谈前夜，金国使者死在宰相驻地，所携密信也不翼而飞。小兵张大与亲兵营副统领孙均机缘巧合被裹挟进这巨大阴谋之中。',
        tags: ['悬疑', '剧情', '历史']
      }
    ];
    setFavorites(mockFavorites);
  }, []);

  const handleRemove = (id) => {
    Modal.confirm({
      title: '确认取消收藏',
      content: '确定要从收藏夹中移除该电影吗？',
      onOk: () => {
        const newFavorites = favorites.filter(item => item.id !== id);
        setFavorites(newFavorites);
        message.success('已取消收藏');
      }
    });
  };

  const handlePlay = (id) => {
    // 这里应该跳转到播放页面
    message.success('即将跳转到播放页面');
  };

  return (
    <div className="favorites-container">
      <Card title="我的收藏" className="favorites-card">
        <List
          itemLayout="vertical"
          size="large"
          dataSource={favorites}
          loading={loading}
          renderItem={item => (
            <List.Item
              key={item.id}
              actions={[
                <Button
                  type="primary"
                  icon={<PlayCircleOutlined />}
                  onClick={() => handlePlay(item.id)}
                >
                  立即观看
                </Button>,
                <Button
                  danger
                  icon={<DeleteOutlined />}
                  onClick={() => handleRemove(item.id)}
                >
                  取消收藏
                </Button>
              ]}
              extra={
                <img
                  width={120}
                  alt={item.title}
                  src={item.poster}
                  className="movie-poster"
                />
              }
            >
              <List.Item.Meta
                title={
                  <div className="movie-title">
                    <Link to={`/movie/${item.id}`}>{item.title}</Link>
                    <Rate
                      disabled
                      defaultValue={item.rating / 2}
                      allowHalf
                      character={<StarOutlined />}
                    />
                    <span className="rating">{item.rating}</span>
                  </div>
                }
                description={
                  <div className="movie-info">
                    <Row gutter={16}>
                      <Col span={12}>
                        <p><span className="label">时长：</span>{item.duration}</p>
                        <p><span className="label">类型：</span>{item.type}</p>
                        <p><span className="label">上映日期：</span>{item.releaseDate}</p>
                      </Col>
                      <Col span={12}>
                        <div className="tags">
                          {item.tags.map(tag => (
                            <Tag key={tag} color="blue">{tag}</Tag>
                          ))}
                        </div>
                      </Col>
                    </Row>
                    <p className="description">{item.description}</p>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
};

export default Favorites; 